<!--#
layout("/layouts/platform.html"){
#-->
<div id="app" v-cloak>
    <!--<div class="head">
        <div class="headone"><i class="el-icon-menu"></i><span>{{headTitle}}</span></div>
    </div>-->
    <el-row class="header navbar bg-white">
        <div class="btn-group tool-button" style="line-height: 50px;">
            <el-input placeholder="样品编号或名称" v-trim v-model="pageForm.searchKeyword" size="mini"
                      style="width:180px;"></el-input>
            <el-select v-trim v-model="pageForm.lzzt" placeholder="流转状态" size="mini" style="width:180px;">
                <el-option key="" label="全部" value=""></el-option>
                <el-option v-for="item in allMap.lzztOptions" v-if="item.value >= pageForm.thisLzzt" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
            <el-button slot="append" icon="el-icon-search" size="mini" @click="doSearch" circle></el-button>
        </div>
    </el-row>
    <el-row class="el-table-container">
        <el-table :data="tableData" @sort-change='pageOrder' height="520" border size="small" header-align="center"
                  style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column fixed="left" prop="userOnline" label="操作" width="120" header-align="center"
                             align="center">
                <template slot-scope="scope">
                    <el-dropdown @command="dropdownCommand">
                        <el-button size="mini"><i class="ti-settings"></i><span class="ti-angle-down"></span>
                        </el-button>
                        <el-dropdown-menu slot="dropdown">
                            <!--#if(@shiro.hasPermission("bus.ypxx.yj.toyj")||@shiro.hasPermission("bus.ypxx.yj.toyj1")){#-->
                            <template v-if="scope.row.lzzt==0 && pageForm.thisLzzt==0 ">
                                <el-dropdown-item divided :command="{type:'to',obj:scope.row}">移交0</el-dropdown-item>
                            </template>
                            <template
                                    v-if="scope.row.lzzt==1 && scope.row.jsr==allMap.userId && pageForm.thisLzzt==0 && scope.row.status=='1'">
                                <el-dropdown-item divided :command="{type:'to',obj:scope.row}" v-if="">移交1
                                </el-dropdown-item>
                            </template>
                            <template v-if="scope.row.lzzt==2 && pageForm.thisLzzt==0 && scope.row.status!='1'">
                                <el-dropdown-item divided :command="{type:'to',obj:scope.row}">移交2</el-dropdown-item>
                            </template>
                            <template v-if="scope.row.status=='0'">
                                <el-dropdown-item divided :command="{type:'tojs',obj:scope.row}">接收</el-dropdown-item>
                            </template>
                            <!--<template v-if="(scope.row.lzzt==0 || scope.row.lzzt==2 ||(scope.row.lzzt==1 && scope.row.jsr==allMap.userId)) && pageForm.thisLzzt==0 ">
                                <el-dropdown-item divided :command="{type:'to',id:scope.row.id}">移交</el-dropdown-item>
                            </template>-->
                            <!--#}#-->
                            <!--#if(@shiro.hasPermission("bus.ypxx.yj.toty")){#-->
                            <template v-if="scope.row.lzzt==1 && pageForm.thisLzzt==1 && scope.row.status=='1'">
                                <el-dropdown-item divided :command="{type:'to',obj:scope.row}">退样</el-dropdown-item>
                            </template>
                            <!--#}#-->
                            <!--#if(@shiro.hasPermission("bus.ypxx.yj.togh")){#-->
                            <template v-if="scope.row.lzzt==2 && pageForm.thisLzzt==2 && scope.row.status=='1'">
                                <el-dropdown-item divided :command="{type:'to',obj:scope.row}">归还</el-dropdown-item>
                            </template>
                            <!--#}#-->
                            <el-dropdown-item :command="{type:'detail',obj:scope.row}">详情</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </template>
            </el-table-column>
            <el-table-column fixed="left" prop="status" label="接收状态" width="100px;" header-align="center"
                             show-overflow-tooltip>
                <template slot-scope="scope">
                    <span v-if="scope.row.status=='0'">待接收</span>
                    <span v-if="scope.row.status=='1'">已接收</span>
                    <span v-if="scope.row.status=='-1'">已拒收</span>
                </template>
            </el-table-column>
            <el-table-column fixed="left" prop="lzzt" label="流转状态" width="100px;" header-align="center"
                             show-overflow-tooltip>
                <template slot-scope="scope" ><span :class="'lzstatusCss-'+scope.row.lzzt"><i :class="'lzel-icon-'+scope.row.lzzt"/>{{getDict(scope.row.lzzt,allMap.lzztMap)}}</span></template>
            </el-table-column>
            <el-table-column fixed="left" sortable="custom" prop="ypbh" label="样品编号" width="150px;" header-align="center"
                             show-overflow-tooltip></el-table-column>
            <el-table-column fixed="left" sortable="custom" prop="ypmc" label="产品名称" width="150px;" header-align="center"
                             show-overflow-tooltip></el-table-column>
            <el-table-column sortable="custom" prop="jylx" label="检验类别" width="100px;" header-align="center" align="center"
                             show-overflow-tooltip>
                <template slot-scope="scope">{{getDict(scope.row.jylx,allMap.jylxMap)}}</template>
            </el-table-column>
            <el-table-column sortable="custom" prop="jyks" label="检验部门" width="100px;" header-align="center" align="center"
                             show-overflow-tooltip></el-table-column>
            <el-table-column prop="wtdw" label="委托单位" width="100px;" header-align="center" align="center"
                             show-overflow-tooltip></el-table-column>
            <el-table-column prop="ggxh" label="规格型号" width="100px;" header-align="center" align="center"
                             show-overflow-tooltip></el-table-column>
            <el-table-column prop="scrqpc" label="生产日期/批号" width="120px;" header-align="center" align="center"
                             show-overflow-tooltip></el-table-column>
            <el-table-column prop="sb" label="商标" width="100px;" header-align="center" align="center"
                             show-overflow-tooltip></el-table-column>
            <el-table-column sortable="custom" prop="wcqx" label="完成期限" width="100px;" header-align="center" align="center"
                             show-overflow-tooltip></el-table-column>
            <el-table-column prop="" label="剩余时间" width="100px;" header-align="center" align="center"
                             show-overflow-tooltip>
                <template slot-scope="scope" ><span :id="'foot'+scope.$index">{{getDay(scope.row.wcqx,scope.$index)}}</span></template>
            </el-table-column>
        </el-table>
    </el-row>
    <el-row class="el-pagination-container">
        <el-pagination @size-change="pageSizeChange" @current-change="pageNumberChange"
                       :current-page="pageForm.pageNumber" :page-sizes="[10, 20, 30, 50]"
                       :page-size="pageForm.pageSize" layout="total, sizes, prev, pager, next, jumper"
                       :total="pageForm.totalCount">
        </el-pagination>
    </el-row>
    </el-dialog>
    <el-drawer :wrapperClosable="false" title="详情" :visible.sync="drawer" direction="rtl" size="80%"
               @opened="openIframe" destroy-on-close>
        <iframe id="iframeDetail" src="" width="100%" height="100%" frameborder="0" marginheight="0"></iframe>
    </el-drawer>
    <el-dialog :close-on-click-modal="false" :title="title" :visible.sync="addDialogVisible" width="40%">
        <el-form :model="formData" ref="addForm" :rules="Rules" size="mini" label-width="120px">
            <el-form-item prop="ypbh" label="样品编号">
                <el-link type="primary" size="mini" @click="dropdownCommand({type:'detail',id:formData})">
                    {{formData.ypbh}}
                </el-link>
            </el-form-item>
            <el-form-item prop="sfty" label="是否退样">
                <el-radio-group v-model="formData.sfty" size="mini" v-if="formData.lzzt==0">
                    <el-radio label="0">是</el-radio>
                    <el-radio label="1">否</el-radio>
                </el-radio-group>
                <span v-else>
                    {{formData.sfty==0?'是':'否'}}
                </span>
            </el-form-item>
            <el-form-item prop="tyzt" v-if="formData.sfty==0" label="退样状态">
                <el-radio-group v-model="formData.tyzt" size="mini">
                    <el-radio-button label="原样" value="原样"></el-radio-button>
                    <el-radio-button label="残次" value="残次"></el-radio-button>
                    <el-radio-button label="报损" value="报损"></el-radio-button>
                </el-radio-group>
            </el-form-item>
            <el-form-item prop="yjsj" label="移交时间" v-if="pageForm.thisLzzt==0">
                <el-date-picker type="datetime" v-trim v-model="formData.yjsj" value-format="yyyy-MM-dd HH:mm:ss"
                                style="width: 180px;"></el-date-picker>
            </el-form-item>
            <el-form-item prop="yjsj" label="退样时间" v-if="pageForm.thisLzzt==1">
                <el-date-picker type="datetime" v-trim v-model="formData.yjsj" value-format="yyyy-MM-dd HH:mm:ss"
                                style="width: 180px;"></el-date-picker>
            </el-form-item>
            <el-form-item prop="jhwcqx" label="计划完成日期" v-if="pageForm.thisLzzt==0">
                <el-date-picker type="date" v-trim v-model="formData.jhwcqx" value-format="yyyy-MM-dd"
                                style="width: 180px;"></el-date-picker>
            </el-form-item>
            <el-form-item prop="bysl" label="备样数量" v-if="pageForm.thisLzzt==0">
                {{formData.bysl}}
            </el-form-item>
            <el-form-item prop="bysl" label="检样数量" v-if="pageForm.thisLzzt==0">
                {{formData.jysl}}
            </el-form-item>
            <el-form-item prop="yjsl" label="移交数量">
                <el-input maxlength="30" v-trim v-model="formData.yjsl" style="width:180px;"
                          v-if="pageForm.thisLzzt==0"></el-input>
                <span v-else>{{formData.yjsl}}</span>
            </el-form-item>
            <el-form-item prop="tysl" label="退样数量" v-if="formData.thisLzzt>0 && formData.sfty==0">
                <el-input maxlength="30" v-trim v-model="formData.tysl" style="width:180px;"
                          v-if="pageForm.thisLzzt==1"></el-input>
                <span v-else>{{formData.tysl}}</span>
            </el-form-item>
            <el-form-item prop="ghsl" label="归还数量" v-if="formData.thisLzzt>1 && formData.sfty==0">
                <el-input maxlength="30" v-trim v-model="formData.ghsl" style="width:180px;"  v-if="pageForm.thisLzzt==2"></el-input>
                <span v-else>{{formData.ghsl}}</span>
            </el-form-item>
            <el-form-item prop="nextsprIds" label="接收人" v-if="pageForm.thisLzzt==0">
                <!--<el-cascader v-model="formData.jsr" :options="allMap.userOptions" style="width:180px;" filterable></el-cascader>-->
                <el-cascader v-model="formData.nextsprIds" :options="allMap.userOptions" ref="nextsprCascader"
                             style="width:100%;"></el-cascader>
            </el-form-item>
            <el-form-item prop="tysl" label="自行处置" v-if="formData.thisLzzt==1 && formData.sfty==1">
                <span>无需退样，请自行处置</span>
            </el-form-item>
            <el-form-item prop="spyj" label="备注">
                <el-input maxlength="200" v-trim v-model="formData.spyj" type="textarea" size="mini" rows="3"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
                    <el-button @click="addDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="doAdd">提 交</el-button>
                  </span>
    </el-dialog>

    <el-dialog :close-on-click-modal="false" title="样品接收" :visible.sync="jsDialogVisible" width="60%" min-width="500px">
        <el-form :model="jsformData" ref="jsForm" :rules="jsRules" size="mini" label-width="120px">
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item prop="ypbh" label="样品编号">
                        <el-link type="primary" size="mini" @click="dropdownCommand({type:'detail',id:formData})">
                            {{jsformData.ypbh}}
                        </el-link>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="是否退样">
                        {{jsformData.sfty==0?'是':'否'}}
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item v-if="jsformData.sfty==0" label="退样状态">
                        {{jsformData.tyzt}}
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="移交时间" v-if="pageForm.thisLzzt==1 || pageForm.thisLzzt==0">
                        {{jsformData.lzAt}}
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="退样时间" v-if="pageForm.thisLzzt==2">
                        {{jsformData.lzAt}}
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item prop="jhwcqx" label="计划完成日期">
                        {{jsformData.jhwcqx}}
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item prop="bysl" label="备样数量" v-if="pageForm.thisLzzt==1 || pageForm.thisLzzt==0">
                        {{jsformData.bysl}}
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item prop="bysl" label="检样数量" v-if="pageForm.thisLzzt==1 || pageForm.thisLzzt==0">
                        {{jsformData.jysl}}
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item prop="yjsl" label="移交数量" v-if="pageForm.thisLzzt==1 || pageForm.thisLzzt==0">
                        {{jsformData.number}}
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item prop="tysl" label="退样数量" v-if="pageForm.thisLzzt==3">
                        {{jsformData.number}}
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item prop="tysl" label="发起人">
                        {{jsformData.fqr}}
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item prop="tysl" label="接收人">
                        {{jsformData.nextspr}}
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item prop="tysl" label="备注">
                {{jsformData.oldSpyj}}
            </el-form-item>
            <el-row :gutter="20">
                <el-col :span="12">
            <el-form-item prop="status" label="是否接收">
                <el-radio-group v-model="jsformData.status" size="mini">
                    <el-radio label="1" border>接收</el-radio>
                    <el-radio label="-1" border>拒收</el-radio>
                </el-radio-group>
            </el-form-item>
                </el-col>
                <el-col :span="12">
            <el-form-item prop="statusAt" label="接收时间"  v-if="jsformData.status=='1'" >
                <el-date-picker type="datetime" v-trim v-model="jsformData.statusAt" value-format="yyyy-MM-dd HH:mm:ss"
                                style="width: 180px;"></el-date-picker>
            </el-form-item>
                </el-col>
            </el-row>
            <el-form-item prop="spyj" v-if="jsformData.status=='-1'" label="备注">
                <el-input maxlength="200" v-trim v-model="jsformData.spyj" type="textarea" size="mini" rows="3"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
                    <el-button @click="jsDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="jsAdd">提 交</el-button>
                  </span>
    </el-dialog>
</div>
<script>
    new Vue({
        el: "#app",
        data: function () {
            var allMap = {
                jylxMap:${jylxMap},
                lzztMap:${lzztMap},
                userOptions: {},
                lzztOptions:${lzztOptions},
                userId: "${userId}"
            };
            var thisLzzt = ${lzzt}+"";
            return {
                allMap: allMap,
                tableData: [],
                menuOptions: [],
                pageForm: {lzzt: "", thisLzzt: thisLzzt,type:"${type}"},
                title: "样品移交",
                headTitle: "",
                multipleSelection: [],
                drawer: false,
                deltailURL: "",
                formData: {},
                addDialogVisible: false,
                Rules: {
                    tyzt: [{required: true, message: '请选择退样状态！', trigger: ['blur', 'change']}],
                    yjsj: [{required: true, message: '请选择移交时间！', trigger: ['blur', 'change']}],
                    yjsl: [{required: true, message: '请输入移交数量！', trigger: ['blur', 'change']}],
                    nextsprIds: [{required: true, message: '请选择接收人！', trigger: ['blur', 'change']}],
                },

                jsformData: {spyj:""},
                jsDialogVisible: false,
                jsRules: {
                    status: [{required: true, message: '请选择是否接收！', trigger: ['blur', 'change']}],
                    statusAt: [{required: true, message: '请选择接收时间！', trigger: ['blur', 'change']}],
                },

            }
        },
        methods: {
            pageOrder: function (column) {//按字段排序
                this.pageForm.pageOrderName = column.prop;
                this.pageForm.pageOrderBy = column.order;
                this.pageData();
            },
            pageNumberChange: function (val) {//页码更新操作
                this.pageForm.pageNumber = val;
                this.pageData();
            },
            pageSizeChange: function (val) {//分页大小更新操作
                this.pageForm.pageSize = val;
                this.pageData();
            },
            pageData: function () {//加载分页数据
                var self = this;
                sublime.showLoadingbar();//显示loading
                $.post(base + "/platform/bus/ypxx/yj/data", self.pageForm, function (data) {
                    sublime.closeLoadingbar();//关闭loading
                    if (data.code == 0) {
                        self.tableData = data.data.list;
                        self.pageForm.totalCount = data.data.totalCount;
                    } else {
                        self.$message({
                            message: data.msg,
                            type: 'error'
                        });
                    }
                }, "json");
            },
            doSearch: function () {
                this.pageForm.pageNumber = 1;
                this.pageData();
            },
            getDict: function (val, map) {
                val = val + "";
                if (val != null && val != undefined && val != "" && map != null && map != undefined) {
                    var str = val.split(",");
                    var strname = "";
                    for (var a = 0; a < str.length; a++) {
                        strname += map[str[a]];
                        if (strname == null) {
                            alert(1)
                        }
                        if (a < (str.length - 1)) {
                            strname += "/";
                        }
                    }
                    return strname;
                }
                return "";
            },
            dropdownCommand: function (command) {//监听下拉框事件
                var self = this;
                if ("to" == command.type) {
                    //window.location.href="/platform/bus/ypxx/yj/toyj/"+command.id;
                    $.post(base + "/platform/bus/ypxx/yj/toDetail/" + command.obj.id, {}, function (data) {
                        if (data.code == 0) {
                            self.formData = data.data.obj;//加载后台表单数据
                            if (self.formData.lzzt == 0) {
                                self.formData.sfty = "0";
                            }
                            //self.formData.yjrname= data.data.yjrname;
                            self.allMap.userOptions = data.data.userOptions;

                            if (self.pageForm.thisLzzt == "0") {
                                self.title = "样品移交"
                            } else if (self.pageForm.thisLzzt == "1") {
                                if (self.formData.sfty == 0) {
                                    self.title = "样品退样"
                                } else {
                                    self.title = "自行处置"
                                }
                            } else if (self.pageForm.thisLzzt == "2") {
                                self.title = "样品归还"
                            }
                            if (nONull(self.formData.wcqx)) {
                                self.formData.jhwcqx = self.formData.wcqx;
                            }
                            self.addDialogVisible = true;//打开编辑窗口

                        } else {
                            self.$message({
                                message: data.msg,
                                type: 'error'
                            });
                        }
                    }, "json");
                }
                if ("tojs" == command.type) {
                    if (command.obj.status == '0') {
                        var data = JSON.parse(JSON.stringify(command.obj))
                        data.spyj ="";
                        self.jsformData =  data;
                        self.jsformData.status = "1";
                        self.jsformData.oldStatus = command.obj.status;
                        self.jsformData.oldSpyj = command.obj.spyj;
                    }
                    self.jsDialogVisible = true;//打开编辑窗口
                }
                if ("detail" == command.type) {
                    this.drawer = true;
                    this.deltailURL = "/platform/bus/ypxx/jbxx/detail/" + command.obj.id;
                }
            },
            jsAdd: function () {
                var self = this;
                self.$refs["jsForm"].validate(function (valid) {
                    if (valid) {
                        $.post(base + "/platform/bus/ypxx/yj/jsDo", self.jsformData, function (data) {
                            if (data.code == 0) {
                                self.$message({
                                    message: data.msg,
                                    type: 'success'
                                });
                                //window.location.href = "/platform/bus/ypxx/yj";
                                self.jsDialogVisible = false;//打开编辑窗口
                                self.pageData();
                            } else {
                                self.$message({
                                    message: data.msg,
                                    type: 'error'
                                });
                            }
                        }, "json");
                    }
                });
            },
            doAdd: function () {
                var self = this;
                //赋值样品移交状态 "1"
                if (this.pageForm.thisLzzt == "0") {
                    self.formData.lzzt = "1";
                }
                //赋值样品退样状态 "2"
                else if (this.pageForm.thisLzzt == "1") {
                    if (self.formData.sfty == 0) {
                        self.formData.lzzt = "2";
                    } else {
                        self.formData.lzzt = "4";
                    }
                }
                //赋值样品归还状态 "3"
                else if (this.pageForm.thisLzzt == "2") {
                    self.formData.lzzt = "3";
                }
                self.$refs["addForm"].validate(function (valid) {
                    if (valid) {
                        if (nONull(self.formData.nextsprIds)) {
                            self.formData.nextsprIds = self.formData.nextsprIds.join(",");
                            self.formData.nextspr = self.$refs['nextsprCascader'].getCheckedNodes()[0].label;
                        }
                        $.post(base + "/platform/bus/ypxx/yj/yjDo", self.formData, function (data) {
                            if (data.code == 0) {
                                self.$message({
                                    message: data.msg,
                                    type: 'success'
                                });
                                //window.location.href = "/platform/bus/ypxx/yj";
                                self.addDialogVisible = false;//打开编辑窗口
                                self.pageData();
                            } else {
                                self.$message({
                                    message: data.msg,
                                    type: 'error'
                                });
                            }
                        }, "json");
                    }
                });
            },
            openIframe: function () {
                $("#iframeDetail").attr("src", this.deltailURL);
            },
            handleClose: function () {
                this.drawer = false;
            },
            handleSelectionChange: function (val) {
                this.multipleSelection = val;
            },
            getDay(day,index){
                if(day){
                    const today = new Date();
                    const inputDate = new Date(day);
                    const diffTime = inputDate-today;
                    const diffDays = Math.abs((diffTime / (1000 * 60 * 60 * 24)).toFixed(0));
                    if(diffTime<0&&diffDays>0){
                        $("#foot"+index).css("color","red");
                        return "逾期："+diffDays+"天";
                    }else{
                        return "剩余："+diffDays+"天";
                    }
                }else{
                    return "";
                }
            }
        },
        created: function () {
            this.doSearch();
            if (this.pageForm.thisLzzt == "0") {
                this.headTitle = "样品移交"
            } else if (this.pageForm.thisLzzt == "1") {
                this.headTitle = "样品退样"
            } else if (this.pageForm.thisLzzt == "2") {
                this.headTitle = "样品归还"
            }
        }
    });

    function nONull(val) {
        if (val != null && val != undefined && val != "") {
            return true;
        } else {
            return false;
        }
    }
</script>
<!--#
}
#-->
